---
section: About
title: What is SVGR?
slug: /docs/what-is-svgr/
order: 10
---

# What is SVGR?

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

For example, take the following SVG:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>
```

After running SVGR, we got:

```js
import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent
```

To achieve this result, SVGR applies several complex transformations:

- Optimizing using [SVGO](https://github.com/svg/svgo)
- Transforming HTML into JSX in several steps:
  - Converting SVG into HAST (HTML AST)
  - Converting HAST into Babel AST (JSX AST)
  - Transforming AST using Babel (renaming attribute, changing attribute values, ...)
- Wrapping JSX into a React Component
- Converting Babel AST into code
- Formatting code using [Prettier](https://prettier.io/)

This complex pipeline makes SVGR a reliable, safe and extendable tool.

It can be used through:

- [Online playground](/playground/)
- [Command line tool](/docs/cli/)
- [webpack loader](/docs/webpack/)
- [Node.js API](/docs/node-api/)
- [rollup.js plugin](/docs/rollup/)
- [parcel plugin](/docs/parcel/)
- [Next.js plugin](/docs/next/)

It is just the list of official integrations, but the community around SVGR is huge. If you are looking for a plugin, it probably already exists. Give a look to [ecosystem](/docs/ecosystem/) to learn more about existing SVGR integrations.

If you want to learn more, this conference talk is a great introduction:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/geKCzi7ZPkA"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
/>
